<template>
    <ul class="fans">
        <li v-if="fansl.length" class="fans_li" v-for="(item, key) in fansl" :key="key">
            <div class="photo">
                <img :src="item.userPhoto" alt="">
            </div>
            <div class="nickname">
                {{item.userName}}<i class="icon iconfont icon-huangguan1" v-if="item.rankId == 1"></i>
            </div>
        </li>
        <div v-if="fansl.length" class="gengduo" @click="gengduo">{{jiaMsg}}</div>
        <blank v-if="!fansl.length" :title="'暂无粉丝'"></blank>
    </ul>
</template>

<script>
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'fans',
        components: {
            blank
        },
        data() {
            return {
                fansl:[],
                offset: 0,
                limit: 10,
                jiaMsg: '加载更多'
            }
        },
        methods: {
            gengduo(){
                this.offset += this.limit;
                this.fansList()
            },
            fansList() {
                let params = {
                    masterId: this.$store.state.masterId,
                    offset: this.offset,
                    limit: this.limit,
                }
                this.$http.fetchGet('masterFansList', params).then(res => {
                    if(res.code == 200) {
                        if(this.offset == 0) this.fansl = res.data;
                        else this.fansl.push(...res.data);
                        if(res.data.length == 0) this.offset -= this.limit;
                        if(res.data.length == 0) {
                            this.$vux.toast.text('加载完毕')
                            this.jiaMsg = '加载完毕'
                        }
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.fansList()
        }
    }
</script>

<style lang="less" scoped>
    .fans {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        .fans_li{
            width: 100%;
            display: flex;
            .p(20);
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
            .photo{
                .w(124);
                .h(124);
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
            .nickname{
                .lh(124);
                .ml(20);
                i.icon{
                    .ml(20);
                    font-size: 30px;
                    vertical-align: middle;
                    color: #000;
                }
            }
        }
        .gengduo{
            text-align: center;
            .lh(88);
            color: #189BEB;
        }
    }
</style>
